<script setup lang="ts">
import { getMeet } from "@/api/student/my/my";
import { getHMS } from "@/utils/time";
import { onMounted, reactive } from "vue";

let meet: any = reactive([]);
onMounted(() => {
  //会议
  getMeet().then((res) => {
    // console.log(res);
    meet.length = 0;
    if ((res.data.msg = "请求成功")) {
      if (res.data.data.length > 0) {
        meet.push(res.data.data);
      }
    }
  });
  //历史会议
});
</script>
<!--我的会议-->
<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header>
          <h3 class="Title">我的会议</h3>
        </el-header>
        <el-main class="main">
          <el-scrollbar height="300px">
            <template v-if="meet.length > 0" v-for="(item, index) in meet[0]">
              <div class="box">
                <div>
                  <span>{{ item.meetingName }}</span>
                  <p>会议开始时间:{{ getHMS(item.meetingStartTime) }}</p>
                </div>
                <div>
                  <el-button class="btn" plain>进入会议</el-button>
                </div>
              </div>
            </template>
            <template v-if="meet.length == 0">
              <el-empty description="暂无考试" />
            </template>
          </el-scrollbar>

          <!-- <el-divider>历史会议</el-divider>
          <div class="box">
            <div>
              <span>重磅升级 马上涨薪-马士兵0331执业规划考试</span>
              <p>2022-03-31 周四 20：00-20：30</p>
            </div>
            <div>
              <el-button class="btn" plain>详情</el-button>
            </div>
          </div>
          <div class="box">
            <div>
              <span>执业规划考试2</span>
              <p>2022-03-31 周四 20：00-20：30</p>
            </div>
            <div>
              <el-button class="btn" plain>详情</el-button>
            </div>
          </div>
          <div class="box">
            <div>
              <span>马士兵0331执业规划考试3</span>
              <p>2022-03-31 周四 20：00-20：30</p>
            </div>
            <div>
              <el-button class="btn" plain>详情</el-button>
            </div>
          </div> -->
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<style scoped>
.Title {
  color: #23b8ff;
  font-weight: bold;
}

p {
  color: #aaaaaa;
}

.main {
  background-color: white;
}

.box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 13px;
}

.btn {
  width: 80px;
}
</style>
